{% extends "album/base.html" %}

{% block title %}
    短剧剧集
{% endblock %}

{% block page_title %}
    短剧剧集 - 新增
{% endblock %}

{% block body %}
    <div class="form-container">
        <form id="createForm" class="edit-form" method="post"
              action="{{ url_for('album_episode_info.edit', id=form.album_episode_id.data, album_id=album_info.get('id')) }}">
            {{ form.csrf_token }}
            {{ form.album_episode_id() }}
            {{ form.album_id() }}
            <div class="form-section">
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.title.label(class="form-label") }} <span class="required">*</span>
                        {{ form.title(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.title.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.seq_index.label(class="form-label") }}<span class="required">*</span>
                        {{ form.seq_index(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.seq_index.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.covers.label(class="form-label") }}<span class="required">*</span>
                        {{ form.covers() }}
                        <div class="flex gap-2">
                            <div>
                                <button type="button" id="addCoverBtn"
                                        class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                        style="width: 100px" onclick="showAddModal('covers')">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div id="CoversContainer" class="flex flex-wrap gap-2 p-1"></div>
                        </div>
                        <div class="form-error">
                            {% for error in form.covers.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.video_library.label(class="form-label") }}<span class="required">*</span>
                        {{ form.video_library() }}
                        <div class="flex gap-2">
                            <div>
                                <button type="button" id="addVideoBtn"
                                        class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                        style="width: 100px" onclick="showAddModal('video')">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div id="VideoContainer" class="flex flex-wrap gap-2 p-1"></div>
                        </div>
                        <div class="form-error">
                            {% for error in form.video_library.errors %}{{ error }}{% endfor %}</div>
                    </div>
                </div>
            </div>
            <div class="form-section">
                <div class="form-actions">
                    <button type="submit" form="createForm" class="btn btn-primary">
                        <i class="fa fa-paper-plane"></i> 提交
                    </button>
                    <button type="button" id="cancelBtn" class="btn btn-cancel"
                            onclick="window.location.href='{{ url_for('album_episode_info.page',album_id=album_info.get('id')) }}'">
                        <i class="fa fa-reply"></i> 返回
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- 添加封面悬浮层 -->
    <div id="addImageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] fade-in">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-semibold" id="lblSearchTitle"></h3>
                <button onclick="hideAddModal()" class="text-gray-500 pb-2 hover:text-gray-700">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 条件筛选区域 -->
                <div class="search-container gap-2">
                    <label>关键词</label>
                    <div class="filter-input">
                        <input type="text" class="search-input" id="search_image_key"/>
                    </div>
                    <button class="search-button" type="button" id="btnSearchImage">
                        <i class="fa fa-search"></i>查询
                    </button>
                </div>

                <!-- 图片列表区域 -->
                <div class="lg:col-span-2">
                    <div class="grid-container gap-2 text-center border " id="gridContainer">

                    </div>
                </div>

                <div class="button-container gap-2">
                    <button type="button" class="btn btn-primary" id="btnAddObject">
                        <i class="fa fa-paper-plane"></i> 确定
                    </button>
                    <button type="button" class="btn btn-cancel" onclick="hideAddModal()">
                        <i class="fas fa-times"></i> 取消
                    </button>

                </div>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', filename='js/album_episode.js') }}"></script>
    <script>
        initContainer();
    </script>
{% endblock %}